@extends('WShop::layout')
@section('content')
    @include('WShop::public.header')
    @component('WShop::public.header')
        @slot('page_title'){{$page_title}} @endslot
    @endcomponent
    <div class="mui-content mui-scroll-wrapper" id="pullrefresh">
        <div class="mui-scroll">
            <div class="mui-table-view mui-table-view-chevron mui-dingdan mui-bottom">

                <div class="mui-zhuda">
                    <div class="mui-dingdan-list">
                        @if($list->isNotEmpty())
                            <ul class="mui-list-unstyled mui-clearfix" id="pull-load" data-level="{{json_encode(config('shop.level'))}}" data-bill_money = "{{json_encode(format_rule(json_decode(get_rule('bill_money'))))}}">
                                @foreach($list as $item)
                                    <li class="bg-fff">
                                        <div class="dingdan-list-header">会员编号：{{$item->user_number}} <span class="fa fa-angle-right"></span>
                                            <span class="mui-pull-right mui-text-red">待激活</span>
                                        </div>

                                        <div class="flex">
                                            <div class="flex-right" style="width: 100%;">
                                                <div class="flex">
                                                    <div class="mui-ellipsis-2">注册手机：{{$item->user_phone}}</div>
                                                </div>
                                                <div>
                                                    <div style="padding-left: 10px;color: #999;">注册时间：{{$item->created_at}}</div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="mui-text-right"></div>

                                        <div class="mui-text-right1">
                                            <a href="javascript:;"
                                               data-url="{{route('f_Wap_User_active',['no_user_id'=>$item->member_id])}}"
                                               class="mui-btn operation" style="background-color: green;color: #ffffff;">激活</a>

                                            <a href="javascript:;"
                                               data-url="{{route('f_Wap_User_remove',['no_user_id'=>$item->member_id])}}"
                                               class="mui-btn operation quxiao">删除</a>
                                        </div>

                                    </li>
                                @endforeach
                            </ul>
                        @else
                            <div style="height: 110px;"></div>
                            <div class="mui-text-center">
                                <img src="{{asset(config('mall.wap_assets1').'/images/empty.png')}}" alt="" width="200">
                                <p style="margin-top: 50px;"><a href="javascript:void(0);" style="color: #fff;border: 1px solid #8a96a2;padding: 8px 24px;border-radius: 16px;background: #8a96a2;">暂无数据</a></p>
                            </div>

                        @endif
                    </div>

                </div>

            </div>
        </div>
    </div>
    @include('WShop::public.foot_bar',['active'=>'user'])
@endsection
@push('scripts')
    <script>
        orderOpt();
        function orderOpt() {
            $('.operation').each(function () {
                this.addEventListener('tap',function () {
                    var url = $(this).data('url');
                    mui.confirm('确认执行该操作？','',function(e){
                        if(e.index==1){
                            var load =  layer.open({type: 2});
                            $.ajax({
                                type: 'get',
                                url: url,
                            }).done(function (response) {
                                if(response.status){
                                    tooltips(response.msg,6);
                                    setTimeout(function () {
                                        location.href = response.url;
                                    }, 2000);
                                }else{
                                    tooltips(response.msg,5);
                                }
                            }).fail(function (XMLHttpRequest) {
                                if (XMLHttpRequest.status == 422) {
                                    var errors = XMLHttpRequest.responseJSON.errors;
                                    if(typeof errors == 'object') {
                                        for (var index in errors) { // 不推荐这样
                                            tooltips(errors[index][0]);
                                            break;
                                        }
                                    }else{
                                        tooltips(XMLHttpRequest.responseJSON.msg);

                                    }
                                }else{
                                    tooltips('网络异常,请检查连接');
                                }

                            }).always(function () {
                                layer.close(load);
                            });

                            function tooltips(msg) {
                                mui.toast(msg);
                            }
                        }
                    })
                });
            });

        }

    </script>
    <script src="{{asset(config('view.plugin').'/other/day.js')}}"></script>
    <script src="{{asset(config('view.frontend.wap_login').'/js/pull-loading.js')}}"></script>
    <script>

        var levelName = $('#pull-load').data('level');
        var BillMoney = $('#pull-load').data('bill_money');

        pullLoading.tpl = '<li class="bg-fff">\n' +
            '<div class="dingdan-list-header">订单编号：{%user_number%} <span class="fa fa-angle-right"></span> <span class="mui-pull-right mui-text-red">待激活</span></div>' +
            '{%goods_item%}<div class="mui-text-right"></div>\n' +
            '<div class="mui-text-right1">{%opt_btn%}</div>\n' +
            '</li>';

        pullLoading.load(function (data) {
            var goodsItemTpl = '<div class="flex">' +
                '<div class="flex-right" style="width: 100%;">' +
                '<div class="flex"><div class="mui-ellipsis-2">注册手机：{%user_phone%}</div></div>\n' +
                '<div><div style="padding-left: 10px;color: #999;">注册级别：{%level%}</div>\n' +
                '<div style="padding-left: 10px;color: #999;">注册时间：{%created_at%}</div>\n' +
                '</div></div></div>';

            var len = data.length;
            for (var i=0; i<len; i++){
                var opt_btn = '';

                opt_btn= ' <a href="javascript:;" data-url="{{route('f_Wap_User_active',['no_user_id'=>-100])}}"class="mui-btn operation" style="background-color: green;color: #ffffff;">激活</a>'+
                         ' <a href="javascript:;" data-url="{{route('f_Wap_User_remove',['no_user_id'=>-100])}}"class="mui-btn operation quxiao">删除</a>';

                opt_btn = opt_btn.replace(/-100/g,data[i]['id']);

                var levelText = '';
                    levelText = levelName[data[i]['level']] + '---' + BillMoney[data[i]['level']][1] ;
                var goodsItem = '';

                    goodsItem += goodsItemTpl
                        .replace('{%user_phone%}',data[i]['user_phone'])
                        .replace('{%level%}',levelText)
                        .replace('{%created_at%}',dayjs(data[i]['created_at']*1000).format('YYYY-MM-DD HH:mm:ss'))

                var itemTpl =pullLoading.tpl;

                itemTpl = itemTpl.replace('{%user_number%}',data[i]['user_number'])
                    .replace('{%goods_item%}',goodsItem)
                    .replace('{%opt_btn%}',opt_btn);

                $("#pull-load").append(itemTpl);
                orderOpt();
            }
        })
    </script>
@endpush